<template>
  <div class="page-container-padding">
    <el-tabs v-model="curTabName">
      <el-tab-pane name="manage" label="基差管理">
        <div class="query-param">
          <el-date-picker v-model="manageDate" size="mini" />
          <el-button
            type="primary"
            size="mini"
            style="margin-left: 8px"
            @click="getFutureSpotBasic"
          >
            查询
          </el-button>
        </div>
        <div style="margin-top: 16px">
          <el-table border stripe :data="manageDataList">
            <el-table-column prop="id" label="ID" />
            <el-table-column prop="date" label="日期" />
            <el-table-column prop="name" label="名称" />
            <el-table-column prop="code" label="代码" />
            <el-table-column prop="close" label="期货价" />
            <el-table-column prop="close_change" label="期价变化" />
            <el-table-column prop="spot" label="现货价" />
            <el-table-column prop="spot_change" label="现价变化" />
            <el-table-column label="状态" width="110" align="center">
              <template #default="scope">
                <el-tag
                  size="mini"
                  :type="scope.row.is_active ? 'success' : 'danger'"
                >
                  {{ scope.row.is_active ? '公开' : '隐蔽' }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="60" align="center">
              <template #default="scope">
                <el-button type="text" @click="toUpdateBasicRow(scope.row)">
                  编辑
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-tab-pane>
      <el-tab-pane name="create" label="新增">
        <div class="query-param">
          <el-date-picker v-model="createDate" size="mini" />
          <el-button
            type="primary"
            size="mini"
            style="margin-left: 8px"
            @click="getNewFutureSpotBasic"
          >
            查询
          </el-button>
          <el-button
            type="success"
            size="mini"
            style="margin-left: 8px"
            :loading="newSaveLoading"
            @click="saveNewFutureSpotBaisc"
          >
            保存
          </el-button>
        </div>
        <div style="margin-top: 16px">
          <el-table border stripe :data="newDataList">
            <el-table-column prop="date" label="日期" />
            <el-table-column prop="name" label="名称" />
            <el-table-column prop="code" label="代码" />
            <el-table-column prop="close" label="期货价" />
            <el-table-column prop="close_change" label="期价变化" />
            <el-table-column prop="spot" label="现货价" />
            <el-table-column prop="spot_change" label="现价变化" />
          </el-table>
        </div>
      </el-tab-pane>
    </el-tabs>
    <!-- 编辑行 -->
    <el-dialog :visible.sync="manageDialog.isShow" title="编辑基差数据">
      <el-form size="mini" label-width="80px">
        <el-form-item label="品种">
          <div>{{ manageDialog.name }}</div>
        </el-form-item>
        <el-form-item label="期价">
          <el-input v-model="manageDialog.close"></el-input>
        </el-form-item>
        <el-form-item label="期价变化">
          <el-input v-model="manageDialog.close_change"></el-input>
        </el-form-item>
        <el-form-item label="现价">
          <el-input v-model="manageDialog.spot"></el-input>
        </el-form-item>
        <el-form-item label="现价变化">
          <el-input v-model="manageDialog.spot_change"></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-switch
            v-model="manageDialog.is_active"
            active-text="公开"
            inactive-text="隐蔽"
          />
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="manageDialog.isShow = false">取消</el-button>
        <el-button
          type="primary"
          :loading="manageDialog.saveLoading"
          @click="toSaveManageRow"
        >
          确定保存
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import { datetimeToStr } from '@/utils/datetimeUtils'
  import {
    RetrieveFutureSpotBasic,
    UpdateFutureSpotBasic,
    CreateFutureSpotBasic,
  } from '@/api/adminRuizhi/dailyMaintain'
  import { getSpotBasicTable } from '@/api/analysisData/spot'
  export default {
    data() {
      return {
        curTabName: 'manage',
        manageDate: new Date(),
        manageDataList: [],
        manageDialog: {
          isShow: false,
          rid: -1,
          name: '',
          close: '',
          close_change: '',
          spot: '',
          spot_change: '',
          is_active: null,
          saveLoading: false,
        },

        createDate: new Date(),
        newDataList: [],
        newSaveLoading: false,
      }
    },
    mounted() {},
    methods: {
      // 查询今日基差数据
      getFutureSpotBasic() {
        const mDate = datetimeToStr(this.manageDate, true, '')
        RetrieveFutureSpotBasic(mDate).then((res) => {
          const resData = res.data
          this.manageDataList = resData.basic
        })
      },

      toUpdateBasicRow(row) {
        this.manageDialog.rid = row.id
        this.manageDialog.name = row.name
        this.manageDialog.close = row.close
        this.manageDialog.close_change = row.close_change
        this.manageDialog.spot = row.spot
        this.manageDialog.spot_change = row.spot_change
        this.manageDialog.is_active = row.is_active
        this.manageDialog.isShow = true
      },

      toSaveManageRow() {
        const bodyData = { ...this.manageDialog }
        UpdateFutureSpotBasic([bodyData]).then((res) => {
          this.$baseMessage(res.message, 'success')
          this.getFutureSpotBasic()
          this.manageDialog.isShow = false
        })
      },

      // 查询新的基差数据
      getNewFutureSpotBasic() {
        const nDate = datetimeToStr(this.createDate, true, '')
        getSpotBasicTable({ date: nDate }).then((res) => {
          this.newDataList = res.data.map((item) => {
            return {
              date: item.basic_date,
              name: item.variety_name,
              code: item.variety_en,
              close: item.close_price,
              close_change: item.close_price_diff,
              spot: item.price,
              spot_change: item.price_diff,
            }
          })
        })
      },
      // 保存
      saveNewFutureSpotBaisc() {
        if (this.newDataList.length < 1) {
          this.$baseMessage('没有数据可保存，请先查询。', 'error')
          return
        }
        this.newSaveLoading = true
        CreateFutureSpotBasic(this.newDataList).then((res) => {
          this.$baseMessage(res.message, 'success')
          this.newDataList = []
          this.newSaveLoading = false
        })
      },
    },
  }
</script>
<style scoped lang="scss">
  .query-param {
    display: flex;
    align-items: center;
  }
</style>
